import React, { Component } from 'react';
import { StyleSheet, View, Text, PixelRatio, ActivityIndicator } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { orderStyle, commonStyle } from '../_common/style';
import { style } from '../../../../theme/style';
import navigationSeevice from '../../../../components/navigation/navigationSeevice'
import { WlCpt } from './WlCpt';
import { SsCpt } from './SsCpt';
import OrderDetailsService from '../_common/service';
const scale = GLOBAL.SCALE;
export class TabCpt extends Component {
	constructor(props) {
		super(props);
		this.state = {
			tabIndex: 0
		}
	}

	// tab 切换
	_tabFn = (tabIndex) => {
		if (tabIndex == 2) {
			this._getMxData();
		} else if (tabIndex == 1) {
			this._getWlData();
		}
		this.setState({
			tabIndex
		})
	}

	//获取数据 - 物流
	_getWlData = async () => {
		let { itemData, flagData } = this.props.data || {};
		let { noticeId } = itemData || {};
		let { orderType } = flagData || {};
		let wlData = await OrderDetailsService.stockWlList({ noticeId, orderType });
		this.setState({
			wlData,
			wlDataStatus: wlData.length || 0
		})
	}

	//获取数据 - 明细
	_getMxData = async () => {
		let { itemData, flagData } = this.props.data || {};
		let { noticeId } = itemData || {};
		let mxData = await OrderDetailsService.stockMxList({ noticeId });
		this.setState({
			mxData: mxData.rows,
			mxDataStatus: mxData.rows.length || 0
		})
	}

	//入口通知 view
	_rktzView = () => {
		let { itemData, flagData } = this.props.data || {};
		let { orderType } = flagData || {};
		let { noticeId, noticeQuantity, signQuantity, statusName, deliveryTypeName, warehouseName,
			sendQuantity
		} = itemData || {};
		return (
			<View>
				{itemData ? (
					<View style={styles.tabBody}>
						<View style={styles.tabLie2}>
							<View style={[orderStyle.listHead, commonStyle.row2]}>
								<Text style={orderStyle.listTitle}>{orderType == 'S' ? '出库' : '入库'}单 {noticeId}</Text>
								<Text style={orderStyle.listStatus}>{statusName}</Text>
							</View>
							<View style={[commonStyle.row3]}>
								<Text style={[orderStyle.listValue]}>{warehouseName}</Text>
								<Text style={[orderStyle.xian, { paddingTop: 5 * scale }]}>|</Text>
								<Text style={[orderStyle.listValue]}>{deliveryTypeName}</Text>
							</View>
							<View style={commonStyle.row}>
								<View style={orderStyle.listRow}>
									<Text style={[orderStyle.listLable]}>通知量(吨)</Text>
									<Text style={[orderStyle.listValue]}>{noticeQuantity || '-'}</Text>
								</View>
								<View style={orderStyle.listRow}>
									<Text style={[orderStyle.listLable]}>{orderType == 'S' ? '发货' : '收货'}量(吨)</Text>
									<Text style={[orderStyle.listValue]}>{orderType == 'S' ? sendQuantity : signQuantity || '-'}</Text>
								</View>
								<View style={[orderStyle.listRow]}>
									<Text style={orderStyle.listLoad} onPress={() => { navigationSeevice.navigate('RktzDetailsPage', { noticeId, orderType }) }}>[{orderType == 'S' ? '出库' : '入库'}明细]</Text>
								</View>
							</View>
						</View>
					</View>
				) : <View style={orderStyle.laodIng}><ActivityIndicator /></View>}
			</View>
		)
	}


	//物流信息 view
	_wlxxView = () => {
		let { flagData, itemData } = this.props.data || {};
		let { noticeId } = itemData;
		let { wlData, wlDataStatus } = this.state;
		wlData = wlData && wlData.slice(0, 2);
		flagData.noticeId = noticeId;
		return (
			<View>
				{wlDataStatus ? <WlCpt data={{ itemData: wlData || {}, flagData }} /> : <View style={orderStyle.laodIng}>{wlDataStatus == 0 ? <Text style={styles.topMp}>暂无数据</Text> : <ActivityIndicator />}</View>}
			</View>
		)
	}

	//实收明细 view
	_wlmxView = () => {
		let { flagData } = this.props.data || {};
		let { mxData, mxDataStatus } = this.state;
		mxData = mxData && mxData.slice(0, 2);
		return (
			<View>
				{mxDataStatus ? <SsCpt data={{ itemData: mxData || {}, flagData }} /> : <View style={orderStyle.laodIng}>{mxDataStatus == 0 ? <Text style={styles.topMp}>暂无数据</Text> : <ActivityIndicator />}</View>}
			</View>
		)
	}



	render () {
		let { tabIndex, mxDataStatus, wlDataStatus } = this.state;
		let { itemData, flagData } = this.props.data || {};
		let { createTime, noticeId } = itemData;
		let { orderType } = flagData || {};
		return (
			<View style={orderStyle.listItem}>
				<Text style={orderStyle.listTime}>{createTime}</Text>
				<View style={[orderStyle.listBody]}>
					<View style={styles.tabBox}>
						<View style={styles.tabItem}>
							<Text onPress={() => { this._tabFn(0) }} style={[styles.tabText, tabIndex == '0' ? styles.tabTextActive : null]}>{orderType == 'S' ? '出库' : '入库'}通知</Text>
							<View style={[styles.tabLine, tabIndex == '0' ? styles.tabLine2 : null]}></View>
						</View>
						<View style={styles.tabItem}>
							<Text onPress={() => { this._tabFn(1) }} style={[styles.tabText, tabIndex == '1' ? styles.tabTextActive : null]}>物流信息</Text>
							<View style={[styles.tabLine, tabIndex == '1' ? styles.tabLine2 : null]}></View>
						</View>
						<View style={styles.tabItem}>
							<Text onPress={() => { this._tabFn(2) }} style={[styles.tabText, tabIndex == '2' ? styles.tabTextActive : null]}>{orderType == 'S' ? '实发' : '实收'}明细</Text>
							<View style={[styles.tabLine, tabIndex == '2' ? styles.tabLine2 : null]}></View>
						</View>
					</View>
					{
						tabIndex == '0' ? this._rktzView() : (tabIndex == '1' ? this._wlxxView() : this._wlmxView())
					}
					{tabIndex == 1 && wlDataStatus >= 2 ? <Text style={styles.tabAll} onPress={() => { navigationSeevice.navigate('LogisticsListPage', { orderType, noticeId, type: 'WL' }) }}>查看全部</Text> : null}
					{tabIndex == 2 && mxDataStatus > 2 ? <Text style={styles.tabAll} onPress={() => { navigationSeevice.navigate('LogisticsListPage', { orderType, noticeId, type: 'MX' }) }}>查看全部</Text> : null}
				</View>
			</View >
		)
	}
}
const styles = StyleSheet.create({
	tabBox: {
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
		flexDirection: 'row',
		justifyContent: 'space-around',
		alignItems: 'center'
	},
	tabItem: {
		position: 'relative',
		flex: 1,
		alignItems: 'center'
	},
	tabText: {
		fontSize: 14 * scale,
	},
	tabTextActive: {
		color: style.color.themeColor,
	},
	tabLine: {
		height: 2 * scale,
		width: 26 * scale,
		backgroundColor: '#fff',
		marginTop: 5 * scale,
		marginBottom: 15 * scale
	},
	tabLine2: {
		backgroundColor: style.color.themeColor,
	},
	tabLie: {
		paddingBottom: 15 * scale,
		marginBottom: 15 * scale,
		// borderBottomWidth: 1 / PixelRatio.get(),
		// borderStyle: 'solid',
		// borderBottomColor: '#E3E7F0',
	},
	tabLie2: {
		paddingBottom: 15 * scale,
		marginBottom: 15 * scale,
	},
	tabAll: {
		color: style.color.themeColor,
		textAlign: 'center',
		paddingTop: 10 * scale
	},
	topMp: {
		marginTop: 10 * scale
	}
})